<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页设计示例</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

</head>
<body>
    <!-- 头部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <img src="logo.png" alt="logo">
                <span>YIIHUU.COM</span>
            </div>
            <nav class="nav">
                <ul>
                    <li><a href="#">全部教程</a></li>
                    <li><a href="#">软件入门</a></li>
                    <li><a href="#">大师课</a></li>
                    <li class="hot"><a href="#">特训营</a></li>
                    <li class="vip"><a href="#">VIP专区</a></li>
                    <li class="vip"><a href="#">AIGC</a></li>
                    <li class="new"><a href="#">AI社区</a></li>
                    <li class="more">
                        <a href="#">...</a>
                    </li>
                </ul>
                <div class="user-menu">
                    <a href="#"><i class="fa fa-user"></i> AI找课</a>
                    <a href="#">VIP</a>
                    <a href="#"><i class="fa fa-shopping-cart"></i> 购物车 <span class="badge">110</span></a>
                    <a href="#"><i class="fa fa-envelope"></i> 消息</a>
                    <a href="#"><i class="fa fa-sign-in"></i> 登录</a>
                    <a href="#">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 搜索区域 -->
    <section class="search-section">
        <div class="container">
            <form action="#" class="search-form">
                <input type="text" placeholder="搜索感兴趣的教程">
                <button type="submit">搜索</button>
            </form>
            <div class="hot-search">
                热搜： <a href="#">Blender动画</a> | <a href="#">三渲二</a> | <a href="#">maya绑定</a> | <a href="#">maya动画</a> | <a href="#">蓝图</a> | <a href="#">地编</a> | <a href="#">实景</a> | <a href="#">MD</a>
            </div>
        </div>
    </section>

    <!-- 促销横幅 -->
    <section class="banner">
        <div class="container">
            <img src="banner.png" alt="促销横幅">
        </div>
    </section>

    <!-- 过滤器区域 -->
    <section class="filter-section">
        <div class="container">
            <nav class="filter-nav">
                <ul>
                    <li><a href="#">UE4/UE5</a></li>
                    <li><a href="#">软件：</a></li>
                    <li><a href="#">全部</a></li>
                    <li><a href="#">Photoshop</a></li>
                    <li><a href="#">Illustrator</a></li>
                    <li><a href="#">Cinema 4D</a></li>
                    <li><a href="#">Maya</a></li>
                    <li class="selected"><a href="#">UE4/UE5</a></li>
                    <li><a href="#">3dsMax</a></li>
                    <li><a href="#">Blender</a></li>
                    <li><a href="#">ZBrush</a></li>
                    <li><a href="#">After Effects</a></li>
                    <li><a href="#">Premiere</a></li>
                    <li><a href="#">Houdini</a></li>
                    <li><a href="#">AutoCAD</a></li>
                    <li><a href="#">Octane Render</a></li>
                    <li><a href="#">Unity</a></li>
                    <li><a href="#">Vray</a></li>
                    <li><a href="#">InDesign</a></li>
                    <li><a href="#">SketchUp</a></li>
                    <li><a href="#">声衾身影</a></li>
                    <li><a href="#">Arnold</a></li>
                    <li><a href="#">SketchBook</a></li>
                    <li><a href="#">DaVinci Resolve</a></li>
                    <li><a href="#">更多...</a></li>
                </ul>
            </nav>
            <nav class="filter-nav">
                <ul>
                    <li><a href="#">分类：</a></li>
                    <li><a href="#">全部</a></li>
                    <li><a href="#">游戏设计</a></li>
                    <li><a href="#">环境艺术</a></li>
                    <li><a href="#">CG电影</a></li>
                    <li><a href="#">动漫设计</a></li>
                    <li><a href="#">原画设计</a></li>
                    <li><a href="#">影视制作</a></li>
                    <li><a href="#">C4D</a></li>
                    <li><a href="#">工业设计</a></li>
                    <li><a href="#">AIGC</a></li>
                    <li><a href="#">软件教学</a></li>
                </ul>
            </nav>
            <nav class="filter-nav">
                <ul>
                    <li><a href="#">难度：</a></li>
                    <li><a href="#">全部</a></li>
                    <li><a href="#">初级入门</a></li>
                    <li><a href="#">中级进阶</a></li>
                    <li><a href="#">高级应用</a></li>
                    <li><a href="#">全流程</a></li>
                </ul>
            </nav>
            <nav class="filter-nav">
                <ul>
                    <li><a href="#">类型：</a></li>
                    <li><a href="#">全部</a></li>
                    <li><input type="checkbox"><label>大师课</label></li>
                    <li><input type="checkbox"><label>VIP专享</label></li>
                    <li><input type="checkbox" checked><label>优选课</label></li>
                    <li><input type="checkbox"><label>特训营</label></li>
                    <li><input type="checkbox"><label>限时免费</label></li>
                    <li><button type="button">清除选择</button></li>
                </ul>
            </nav>
        </div>
    </section>

    <!-- 主内容区域 -->
    <section class="content-section">
        <div class="container">
            <div class="courses">
                <!-- 课程卡片 -->
                <div class="course-card">
                    <img src="course1.png" alt="课程1">
                    <div class="course-info">
                        <h3>Unreal Engine教程</h3>
                        <p>由专业讲师授课，从零基础到精通</p>
                    </div>
                </div>
                <div class="course-card">
                    <img src="course2.png" alt="课程2">
                    <div class="course-info">
                        <h3>Blender动画入门</h3>
                        <p>快速掌握3D建模与动画制作</p>
                    </div>
                </div>
                <div class="course-card">
                    <img src="course3.png" alt="课程3">
                    <div class="course-info">
                        <h3>Cinema 4D特效制作</h3>
                        <p>专业级特效制作教程</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 右侧工具栏 -->
    <aside class="tools-bar">
        <div class="tool-item">
            <i class="fa fa-user"></i> 售前咨询
        </div>
        <div class="tool-item">
            <i class="fa fa-comments"></i> 售后反馈
        </div>
        <div class="tool-item">
            <i class="fa fa-weixin"></i> 公众号
        </div>
        <div class="tool-item">
            <i class="fa fa-download"></i> 下载APP
        </div>
    </aside>

    <script src="scripts.js"></script>
</body>
</html>
